<template>
  <uv-popup
    ref="weatherPopupRef"
    mode="center"
    overlay
    :close-on-click-overlay="false"
    z-index="8"
    :round="20"
    bg-color="none"
  >
    <view class="weather-content">
      <view class="weather-title">温湿度上报记录</view>
      <uv-icon
        size="40rpx"
        color="#fff"
        name="close-circle-fill"
        class="close-btn"
        @click="close"
      />
      <scroll-view
        refresher-enabled
        scroll-y
        scroll-with-animation
        :refresher-triggered="trigger"
        refresher-background="#7ba37f"
        @refresherrefresh="refresherrefresh"
        @scrolltolower="scrolltolower"
        class="weather-list"
      >
        <view v-for="(item, k) in dataList" :key="k" class="weather-item">
          <view>
            温度：<text>{{ item.temperature }}℃</text>
          </view>
          <view>
            湿度：<text>{{ item.humidity }}%RH</text>
          </view>
          <view>{{ item.reportTime }}</view>
          <view>
            PLC：<text v-if="item.status == 1">在线</text>
            <text class="red" v-else>离线</text>
          </view>
          <view>
            传感器：<text v-if="item.sensorStatus == 1">在线</text>
            <text class="red" v-else>离线</text>
          </view>
          <!-- <view>
            打印机：<text v-if="item.printerStatus == 1">在线</text>
            <text class="red" v-else>离线</text>
          </view> -->
        </view>
        <view v-if="dataList.length === 0" class="empty">暂无记录</view>
        <uv-load-more
          v-if="dataList.length > 0"
          :status="status"
          color="#fff"
          font-size="20rpx"
        />
      </scroll-view>
    </view>
  </uv-popup>
</template>
<script setup lang="ts">
import { watch, ref } from "vue";
import { heartbeatList } from "@/request/api";
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["update:modelValue", "close"]);

const weatherPopupRef = ref<any>(null); // 弹窗
const queryParams = ref({
  pageNum: 1,
  pageSize: 20,
  serialNumber: "", // 序列号
});
const dataList = ref<any[]>([]); // 温湿度列表
const total = ref<number>(0); // 总数
const status = ref<string>("loadmore"); // 加载状态
const trigger = ref<boolean>(false); // 下拉刷新

// 打开弹窗
const open = () => {
  if (weatherPopupRef.value) {
    let serial = uni.getStorageSync("serialNumber"); // 获取序列号
    queryParams.value.serialNumber = serial;
    if (serial) {
      refresherrefresh();
    } else {
      uni.showToast({
        title: "请先绑定设备",
        icon: "none",
      });
    }
    weatherPopupRef.value.open();
  }
};

// 关闭弹窗
const close = () => {
  if (weatherPopupRef.value) {
    weatherPopupRef.value.close();
  }
  emit("update:modelValue", false);
};

// 下拉刷新
const refresherrefresh = () => {
  trigger.value = true;
  queryParams.value.pageNum = 1;
  getList();
};

// 触底加载
const scrolltolower = () => {
  if (dataList.value.length < total.value) {
    queryParams.value.pageNum++;
    getList();
  }
};

// 获取温湿度列表
const getList = () => {
  status.value = "loading";
  heartbeatList(queryParams.value)
    .then((res: any) => {
      dataList.value =
        queryParams.value.pageNum === 1 ? res.rows : dataList.value.concat(res.rows);
      total.value = res.total;
    })
    .finally(() => {
      trigger.value = false;
      status.value = dataList.value.length < total.value ? "loadmore" : "nomore";
    });
};

watch(
  () => props.modelValue,
  (val) => {
    val ? open() : close();
  },
  {
    immediate: true,
  }
);
</script>
<style lang="scss" scoped>
.weather-content {
  width: 670rpx;
  background: #7ba37f;
  padding: 20rpx;
  position: relative;
  .close-btn {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    z-index: 999;
  }
  .weather-title {
    font-size: 20rpx;
    font-weight: 500;
    color: #fff;
    text-align: center;
    margin-bottom: 20rpx;
  }
}
.weather-list {
  max-height: 70vh;
  .weather-item {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10rpx;
    font-size: 16rpx;
    padding: 10rpx 20rpx;
    margin-bottom: 10rpx;
    color: #fff;
    background: linear-gradient(
      180deg,
      rgba(231, 247, 189, 0.496) 0%,
      rgba(200, 223, 143, 0.8) 100%
    );
    box-shadow: inset 0 2rpx 10rpx 0 rgba(149, 131, 16, 0.3);
    border-radius: 10rpx;
    &:last-child {
      margin-bottom: 0;
    }
    text {
      color: #387a17;
    }
    .red {
      color: #941212;
    }
  }
}
.empty {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 16rpx;
  font-weight: 500;
}
</style>
